<template>
	<view class="container">
		<navbar title="售后订单" background="#fff"></navbar>
		<view class="tab-wrap">
			<view class="tab-item" :class="[tabType == item.type ? 'tab-item-act':'']" v-for='(item,index) in tab' @tap='switchTab(item.type)'>
				{{item.name}}
			</view>
		</view>
		<view v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<view v-if='showData'>
				<view class="order-wrap" v-if='list.length > 0'>
					<view class="order-item-con" @tap='toOrderDetail(item.order_refund_id)' v-for='(item,index) in list' :key="index">
						<view class="order-item-top line-v-center">
							<view class="order-no">{{item.create_time}}</view>
							<view class="status">{{item.state_text}}</view>
						</view>
						<order-goods-list :list='item.goodsList' :pageType='2'></order-goods-list>
						<view class="btn-wrap" v-if='item.order_status == 10'>
							<button class="btn cancel-btn line-center" @tap.stop='cancelOrderModal(index)' v-if='item.delivery_status == 10'>取消订单</button>
							<template>
								<button class="btn again-btn line-center" @tap.stop='watchWuliu(index)' v-if='item.receipt_status == 10'>查看物流</button>
								<button class="btn cancel-btn line-center" @tap.stop='sureOrderModal(index)' v-if='item.receipt_status == 10'>确认收货</button>
							</template>
						</view>
						<view class="btn-wrap" v-if='item.order_status == 30'>
							<button class="btn again-btn line-center" @tap.stop='againOrder(index)'>再来一单</button>
							<button class="btn cancel-btn line-center" @tap.stop='evaluateOrder(index)' v-if='item.is_comment == 0'>去评价</button>
						</view>
					</view>
					<loading :loadEnd='loadEnd'></loading>
				</view>
				<view v-else class="no-data-img">
					<no-data noDataImg='/static/no-order.png'></no-data>
				</view>
			</view>
		</view>
		<logistics-info ref='logistics'></logistics-info>
	</view>
</template>

<script>
	const app = getApp();
	import orderGoodsList from '@/components/order/order-goods-list.vue';
	export default {
		components:{
			orderGoodsList,
		},
		data() {
			return {
				tabType:'-1',
				tab:[
					{
						name:'全部',
						type:'-1'
					},
					{
						name:'待处理',
						type:'0'
					},
				],
				list:[],
				page: 1,
				totalPage: '',
				loadingPage: true,
				loadEnd: false,
				showData:false,
			};
		},
		onLoad(option) {
			this.getList()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getList()
			} else {
				return;
			}
		},
		onPullDownRefresh() {
			this.reload();
			uni.stopPullDownRefresh()
		},
		methods:{
			switchTab(type){
				if(this.tabType == type){
					return;
				}
				this.tabType = type;
				this.reload()
			},
			reload(){
				this.showData = false;
				this.list = [];
				this.page = 1;
				this.totalPage = '';
				this.getList()
			},
			getList(){
				const that = this;
				app.globalRequest({
					api:app.getApi().order.refundList,
					data:{
						page:that.page,
						limits:10,
						state:that.tabType
					}
				}).then(res=>{
					that.loadingPage = false;
					that.showData = true;
					if(res.code == 0){
						res.data.data.forEach(v=>{
							v.goodsList = [v.orderGoods]
						})
						that.list = that.list.concat(res.data.data);
						console.log('that.list',that.list)
						that.totalPage = res.data.last_page;
						if(that.totalPage == that.page){
							that.loadEnd = true;
						}
					}
				})
			},
			viewMore(index) {
				let list = this.list;
				list[index].isFlag = !list[index].isFlag;
				this.list = list;
			},
			cancelOrderModal(index){
				const that = this;
				uni.showModal({
					title:'提示',
					content:`确认要取消此订单吗？`,
					cancelText:'我再想想',
					confirmColor:'#FF5040',
					success(res){
						if(res.confirm){
							that.cancelOrder(index);
						}
					}
				})
			},
			cancelOrder(index){
				const that = this;
				let list = that.list;
				app.globalRequest({
					api:app.getApi().order.orderCancel,
					data:{
						order_id:list[index].order_id
					}
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
						that.tabType = 'all';
						that.list = [];
						that.page = 1;
						that.totalPage = '';
						that.getList()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				})
			},
			sureOrderModal(index){
				const that = this;
				uni.showModal({
					title:'提示',
					content:`确认收到货了吗？`,
					cancelText:'我再想想',
					confirmColor:'#FF5040',
					success(res){
						if(res.confirm){
							that.sureOrder(index);
						}
					}
				})
			},
			sureOrder(index){
				const that = this;
				let list = that.list;
				app.globalRequest({
					api:app.getApi().order.receipt,
					data:{
						order_id:list[index].order_id
					}
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
						that.tabType = 'all';
						that.list = [];
						that.page = 1;
						that.totalPage = '';
						that.getList()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				})
			},
			againOrder(index){
				const that = this;
				let list = that.list;
				app.globalRequest({
					api:app.getApi().order.againOrder,
					data:{
						order_id:list[index].order_id
					}
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
						uni.switchTab({
							url:'/pages/tab-page/cart/cart'
						})
					}
				})
			},
			watchWuliu(index){
				this.$refs.logistics.showModal = true;
				this.$refs.logistics.orderId = this.list[index].order_id;
				this.$refs.logistics.expressCompany = this.list[index].express_company;
				this.$refs.logistics.getAuctionPage()
			},
			evaluateOrder(index){
				uni.navigateTo({
					url:`/pages/after-sale-page/post-comment/post-comment?order_id=${this.list[index].order_id}`
				})
			},
			toOrderDetail(id){
				uni.navigateTo({
					url:`/pages/after-sale-page/after-sale-detail/after-sale-detail?order_refund_id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$supplier-color:#44C082;
	.tab-wrap{
		width: 750rpx;
		height: 88rpx;
		background: #fff;
		position: fixed;
		left:0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index:22;
		.tab-item-act{
			color:#FF5040;
			position: relative;
			&:after{
				content: '';
				width: 40rpx;
				height: 8rpx;
				background: linear-gradient( 90deg, #FF7040 0%, #FF5040 100%);;
				border-radius: 8rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin:auto;
				bottom:-10rpx;
			}
		}
	}
	.wrap{
		padding-top:88rpx;
		padding-bottom: 50rpx;
	}
	.order-wrap{
		margin:0 24rpx;
		.order-item-con{
			background: #fff;
			border-radius: 16rpx;
			padding:28rpx 24rpx;
			margin-top:24rpx;
			.order-item-top{
				font-size: 24rpx;
				justify-content: space-between;
				padding-bottom: 20rpx;
				.status{
					font-size: 24rpx;
					color:#FF5F50;
				}
			}
			.goods-wrap {
				width: 100%;
				height: 470rpx;
				overflow: hidden;
			}
			.goods-wrap-show{
				height: auto;
				overflow: auto;
			}
			
			.more {
				color: #AFB0B2;
				font-size: 24rpx;
				// margin:0 24rpx;
				// padding-top:48rpx;
				// padding-bottom: 26rpx;
			}
		}
		
	}
	.btn-wrap{
		display: flex;
		justify-content: flex-end;
		margin-top:24rpx;
		.btn{
			width: 144rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 34rpx;
			font-size: 24rpx;
			box-sizing: border-box;
			margin-right: 0;
			margin-left:24rpx;
			/* border: 1rpx solid #999999; */
		}
		.cancel-btn{
			border: 1px solid #FF5040;
			color:#FF5040;
		}
		.again-btn{
			border: 1px solid #AFB0B2;
		}
		.pay-btn{
			border:1px solid #333333;
			color:#333333;
		}
	}
	.no-data-img{
		margin-top:100rpx;
	}
	

</style>
